<script setup>

import {getCurrentInstance, onMounted, reactive, ref, toRaw, watch} from "vue";
import api from "@/request/apis.js";
import {nanoid} from "nanoid";
import {Button, Checkbox, Input, Option, Select, Tag} from "view-ui-plus";
import JsonEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.min.css';
import ParamDefine from "@/views/restapi/ParamDefine.vue";
import ParamMapping from "@/views/restapi/ParamMapping.vue";

const props = defineProps(["entity"]);


watch(props, (newValue, oldValue) => {
  init();
});
const queryDefaultResponseWrapper = async () => {
  const defaultResponseWrapper = await api.queryDefaultResponseWrapper();
  if (!defaultResponseWrapper) {
    return
  }
  for (const responseWrapper of defaultResponseWrapper) {
    const id = nanoid(5);
    data.value.params.push({
      // description: responseWrapper.name,
      // key: responseWrapper.code,
      // mappingValue: null
      _key: id,
      fieldCode: responseWrapper.code,
      fieldName: responseWrapper.name,
      fieldType: responseWrapper.type,
      fieldDesc: responseWrapper.name,
      children: [],
      editorFlag: false,
      _showChildren: true,
      isArrayFlag: false,
      mappingValue: null
    })
  }
  //paramColumns.value = defaultResponseWrapper;
}


const data = ref({
  params: [],
  isArrayFlag: false,
  isViewBasicFieldFlag: false,
  isAddColumnFlag: false,
  isUpdateColumnFlag: false,
  isRemoveColumnFlag: false,
  isAddChildrenColumnFlag: false,
  isMappingColumnFlag: true,
  isViewArrayFlag: false,
  basicTypeFlag: false,
  basicFieldType: false
});

const rightData = ref({
  params: [],
  isArrayFlag: false,
  isViewBasicFieldFlag: false,
  isViewArrayFlag: false,
  isMappingColumnFlag: true,
  basicTypeFlag: false,
  basicFieldType: false
});

const init = () => {
  if (!props.entity.sourceFieldDefine) {
    props.entity.sourceFieldDefine = data.value;
  }

  if (props.entity.sourceFieldDefine.params.length <= 0) {
    props.entity.sourceFieldDefine.params = data.value.params;
  }

  if (!props.entity.targetFieldDefine) {
    props.entity.targetFieldDefine = rightData.value;
  }
}
init();
onMounted(async () => {
  await queryDefaultResponseWrapper();
  init();
})

</script>

<template>
  <el-row justify="start" style="margin-top: 10px">
    <el-col :span="2">
      <el-checkbox v-model="props.entity.resultWrapperFlag">返回值是否包裹固定结构</el-checkbox>
    </el-col>
  </el-row>
  <el-row justify="start" style="margin-top: 10px" v-show="props.entity.resultWrapperFlag">
    <ParamMapping :leftData="props.entity.sourceFieldDefine"
                  :rightData="props.entity.targetFieldDefine"></ParamMapping>
    <!--    <el-col :span="12">-->
    <!--      <el-row justify="start" style="margin-top: 10px">-->
    <!--        <el-col :span="2">-->
    <!--          <el-tag class="ml-2" type="success">原始wrapper</el-tag>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--      <el-row justify="start" style="margin-top: 10px">-->
    <!--        <el-col :span="24">-->
    <!--          &lt;!&ndash;          <Table border :columns="paramColumns" stripe highlight-row&ndash;&gt;-->
    <!--          &lt;!&ndash;                 :data="data">&ndash;&gt;-->

    <!--          &lt;!&ndash;            <template #action="{ row, index }">&ndash;&gt;-->
    <!--          &lt;!&ndash;              <el-space wrap>&ndash;&gt;-->
    <!--          &lt;!&ndash;                <Button type="primary">绑定</Button>&ndash;&gt;-->
    <!--          &lt;!&ndash;                <Button type="primary">解绑</Button>&ndash;&gt;-->
    <!--          &lt;!&ndash;              </el-space>&ndash;&gt;-->
    <!--          &lt;!&ndash;            </template>&ndash;&gt;-->
    <!--          &lt;!&ndash;          </Table>&ndash;&gt;-->
    <!--          <ParamDefine :params="data" :isViewBasicFieldFlag="false"-->
    <!--                       :isViewArrayFlag="false"-->
    <!--          :isAddColumnFlag="false"-->
    <!--          :isUpdateColumnFlag="false"-->
    <!--          :isRemoveColumnFlag="false"-->
    <!--          :isAddChildrenColumnFlag="false"-->
    <!--          :isMappingColumnFlag="true"></ParamDefine>-->
    <!--        </el-col>-->
    <!--      </el-row>-->

    <!--    </el-col>-->
    <!--    <el-col :span="12">-->

    <!--      <el-row justify="start" style="margin-top: 10px">-->
    <!--        <el-col :span="2">-->
    <!--          <el-tag class="ml-2" type="success">返回wrapper</el-tag>-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--      <el-row justify="start" style="margin-top: 10px">-->
    <!--        <el-col :span="24">-->
    <!--          <ParamDefine :params="rightData" :isViewBasicFieldFlag="false"-->
    <!--                       :isViewArrayFlag="false" :isMappingColumnFlag="true"></ParamDefine>-->
    <!--          &lt;!&ndash;          <Table row-key="_key" border :columns="rightParamColumns" @on-row-click="rightRowClick" stripe highlight-row&ndash;&gt;-->
    <!--          &lt;!&ndash;                 :data="rightData">&ndash;&gt;-->
    <!--          &lt;!&ndash;            <template #key="{ row, index }">&ndash;&gt;-->
    <!--          &lt;!&ndash;              <Input v-show="row.editorFlag" v-model="row.fieldCode"&ndash;&gt;-->
    <!--          &lt;!&ndash;                     :on-change="valueChange(row,'fieldCode')"&ndash;&gt;-->
    <!--          &lt;!&ndash;                     placeholder="请输入fieldCode"></Input>&ndash;&gt;-->

    <!--          &lt;!&ndash;              <Tag v-show="!row.editorFlag">{{ row.fieldCode }}</Tag>&ndash;&gt;-->
    <!--          &lt;!&ndash;            </template>&ndash;&gt;-->
    <!--          &lt;!&ndash;            &ndash;&gt;-->
    <!--          &lt;!&ndash;            &ndash;&gt;-->
    <!--          &lt;!&ndash;            &ndash;&gt;-->
    <!--          &lt;!&ndash;            <template #action="{ row, index }">&ndash;&gt;-->
    <!--          &lt;!&ndash;              <el-space wrap>&ndash;&gt;-->
    <!--          &lt;!&ndash;                <Button type="primary">绑定</Button>&ndash;&gt;-->
    <!--          &lt;!&ndash;                <Button type="primary">解绑</Button>&ndash;&gt;-->
    <!--          &lt;!&ndash;              </el-space>&ndash;&gt;-->
    <!--          &lt;!&ndash;            </template>&ndash;&gt;-->
    <!--          &lt;!&ndash;          </Table>&ndash;&gt;-->
    <!--        </el-col>-->
    <!--      </el-row>-->
    <!--      &lt;!&ndash;      <el-row justify="start" style="margin-top: 10px">&ndash;&gt;-->
    <!--      &lt;!&ndash;        <el-col :span="6">&ndash;&gt;-->

    <!--      &lt;!&ndash;        </el-col>&ndash;&gt;-->
    <!--      &lt;!&ndash;        <el-col :span="10">&ndash;&gt;-->
    <!--      &lt;!&ndash;          <el-space wrap>&ndash;&gt;-->
    <!--      &lt;!&ndash;            <Button type="primary" @click="addRightTableRow">新增</Button>&ndash;&gt;-->
    <!--      &lt;!&ndash;            <Button type="primary" @click="edit">修改</Button>&ndash;&gt;-->
    <!--      &lt;!&ndash;            <Button type="primary" @click="remove">删除</Button>&ndash;&gt;-->

    <!--      &lt;!&ndash;          </el-space>&ndash;&gt;-->
    <!--      &lt;!&ndash;        </el-col>&ndash;&gt;-->
    <!--      &lt;!&ndash;      </el-row>&ndash;&gt;-->

    <!--    </el-col>-->
  </el-row>
</template>

<style scoped>

</style>